<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item - Alignment</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Item - Alignment</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-list-header>Leading Icons</ion-list-header>
          <ion-item>
            <ion-icon slot="start" name="radio-button-off"></ion-icon>
            <ion-input aria-label="Starting Point" placeholder="Choose Starting Point"></ion-input>
          </ion-item>
          <ion-item>
            <ion-icon slot="start" name="pin"></ion-icon>
            <ion-select aria-label="Destination" placeholder="Choose Really Really Long Destination Here">
              <ion-select-option>Madison, WI</ion-select-option>
              <ion-select-option>Atlanta, GA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>Default Labels</ion-list-header>
          <ion-item>
            <ion-input label="From" placeholder="Choose Starting Point"></ion-input>
          </ion-item>
          <ion-item>
            <ion-select label="Destination" placeholder="Choose Really Really Long Destination Here">
              <ion-select-option>Madison, WI</ion-select-option>
              <ion-select-option>Atlanta, GA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>Fixed Labels</ion-list-header>
          <ion-item>
            <ion-input label="From" label-placement="fixed" placeholder="Choose Starting Point"></ion-input>
          </ion-item>
          <ion-item>
            <ion-select
              label="Destination"
              label-placement="fixed"
              placeholder="Choose Really Really Long Destination Here"
            >
              <ion-select-option>Madison, WI</ion-select-option>
              <ion-select-option>Atlanta, GA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>Floating Labels</ion-list-header>
          <ion-item>
            <ion-input label="From" label-placement="floating"></ion-input>
          </ion-item>
          <ion-item>
            <ion-select label="Destination" label-placement="floating">
              <ion-select-option>Madison, WI</ion-select-option>
              <ion-select-option>Atlanta, GA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>Stacked Labels</ion-list-header>
          <ion-item>
            <ion-input label="From" label-placement="stacked" placeholder="Choose Starting Point"></ion-input>
          </ion-item>
          <ion-item>
            <ion-select
              label="Destination"
              label-placement="stacked"
              placeholder="Choose Really Really Long Destination Here"
            >
              <ion-select-option>Madison, WI</ion-select-option>
              <ion-select-option>Atlanta, GA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>End Labels</ion-list-header>
          <ion-item>
            <ion-input label="From" label-placement="end" placeholder="Choose Starting Point"></ion-input>
          </ion-item>
          <ion-item>
            <ion-select
              label="Destination"
              label-placement="end"
              placeholder="Choose Really Really Long Destination Here"
            >
              <ion-select-option>Madison, WI</ion-select-option>
              <ion-select-option>Atlanta, GA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-app>

    <style>
      ion-item {
        --border-width: 0;
        --inner-border-width: 0;
        --background: #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
      }
    </style>
  </body>
</html>
